@import '../../shared/main';

:root {
    height: 100dvh; // workarounded chrome109-mobile's problem with sticky-bottom bar moving when scrolling

    --bg: #fff;
    --text: #555;
    --text-high-contrast: #111;
    --link: var(--button-bg);
    --ghost-contrast: #8882;
    --ghost-contrast-alt: #eee;
    --faint-contrast: #ddd;
    --mild-contrast: #aaa;
    --good-contrast: #444;
    --button-bg: #6080aa;
    --button-text: #eaeaea;
    --focus-color: #468;
    --separator: " – "; // fallback
    --success: #7c7;
    --warning: #cc7;
    --error: #c77;
    @supports (content: "" / "") {
        --separator: " – " / ""; // skip for screen-reader
    }
    .highlightedText { color: #0006; text-shadow: 0 0 3px #0006; }
    .theme-dark {
        --bg: #000;
        --text: #999;
        --text-high-contrast: #eee;
        --link: #8ac;
        --ghost-contrast-alt: #181818;
        --faint-contrast: #2d2d2d;
        --good-contrast: #aaa;
        --button-bg: #345;
        --button-text: #999;
        --success: #272;
        --warning: #772;
        --error: #a22;

        color-scheme: dark;
        .highlightedText { color: #fff; text-shadow: 0 0 3px #fff; }
        .dialog-closer { background: #633 }
        .dialog-icon {
            color: #ccc;
            .icon { color: #aaa; }
        }
        #root .dialog-backdrop { background: #333b; }
        .error-msg { color: #b88; background-color: #623; }
        button.toggled, a.toggled { color: #eee;
            text-shadow: 0 0 3px #fff;
        }
    }
}
body {
    background-color: var(--bg);
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body, button, select, input { font-size: 12pt; }
.list-wrapper {
    max-width: 54em;
    margin: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
body, input {
    color: var(--text);
}
code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
}
input:not([type=checkbox],[type=range]), select, textarea {
    padding: 0.3em 0.4em;
    border-radius: 0.5em;
    background: var(--bg);
    border-color: var(--mild-contrast);
    color: var(--good-contrast);
    max-width: 100%; box-sizing: border-box; // avoid scrolling
    width: 100%;
}
input[type=range] {
    width: calc(100% - 1px); // chrome116 on android shows a scrollbar because of that 1px
}
input[type=checkbox] {
    transform: scale(1.7);
    accent-color: var(--button-bg);
}
textarea { font-size: 14pt }
label input[type=checkbox] {
    margin-right: .8em;
}
select { text-align: center; } // it is surely cooler on the options dialog

.hidden { display: none !important }

[class^="fa-"]:before, [class*=" fa-"]:before { /* don't need extra margin on fontello icons */
    margin: 0;
}
img.file-icon { height: 1em; }
.file-icon {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: text-bottom;
}

[role=button] .icon {
    margin-right: 0.5em;
}
.icon.mirror:before { transform: scaleX(-1); }
a {
    text-decoration: none;
    color: var(--link);
}
button {
    background-color: var(--button-bg);
    color: var(--button-text);
    padding: .4em .6em;
    display: inline-flex; align-items: center; justify-content: center; // get closer results between chrome and safari
    &.small { padding: .1em .4em; min-height: 30px; }
    .icon { margin: -.2em 0; }
    .font-icon { vertical-align: middle; }
    border: transparent;
    text-decoration: none;
    border-radius: 0.3em;
    vertical-align: middle;
    cursor: pointer;
    &:hover { outline: 1px solid var(--mild-contrast); }
    transition: background-color .5s;
    &[disabled] {
        background-color: var(--faint-contrast);
    }
}
button.toggled {
    color: #fff;
    text-shadow: 0 0 3px #fff;
}
button.success {
    transition:  all .3s;
    background-color: var(--success);
    @extend .highlightedText;
}
a[role=button].success {
    transition:  all .3s;
    color: var(--success);
    text-shadow: 0 0 3px var(--text-high-contrast);
}
a.toggled {
    color: #223;
    text-shadow: 0 0 5px #223;
}
button, .breadcrumb { /* consistent focus color */
    &:focus-visible {
        outline: 3px solid var(--focus-color);
    }
}
a>button { width: 100%; height: 100%;  } /* link buttons, fill parent space */
input, select, ul a {
    &:focus-visible {
        border-radius: .3em;
        border-color: transparent;
        outline: 2px solid var(--focus-color);
    }
}

.icon-button {
    padding: .1em;
    font-size: 108%; height: 1.8em; // same height as text buttons (31px)
    width: 2em;
}

.error-msg {
    background-color: #faa;
    color: #833;
    padding: .5em 1em;
}
.hide-back {
    background-color: var(--bg);
}
header {
    @extend .hide-back;
    position: sticky;
    top: 0;
    padding: .2em .1em;
    z-index: 3; // necessary to not be covered by checkboxes
}

kbd {
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
    color: #333;
    display: inline-block;
    font-size: 0.85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
    margin-right: .5em;
}
.drop-over {
    box-shadow: 0 0 .3em .3em var(--warning);
}

.sliding {
    transition: flex .5s, flex-basis 0.5s ease, opacity 0.5s ease;
    overflow: hidden !important;
}
.hide-sliding {
    white-space: nowrap;
    margin: 0 !important;
    flex: 0 !important;
}

.ani-working { animation:2s blink infinite }

@keyframes spin {
    100% { transform: rotate(360deg); }
}
@keyframes fade-in {
    0% {opacity: 0}
    100% {opacity: 1}
}

.spinner, .icon.spinner:before {
    animation: 1.5s spin infinite linear;
    display: inline-flex; justify-content: center; align-items: center; width: min-content;
}

.breadcrumb {
    padding: 0.1em 0.6em 0.2em;
    line-height: 1.8em;
    border-radius: 0.7em;
    background-color: var(--button-bg);
    color: var(--button-text);

    border-top: 1px solid #666;
    margin-right: -0.1em;
    &:nth-child(-n+3) .icon {
        padding: 0 0.2em;
        height: 1em; // effective only on file-icon
    }
}
#folder-stats, #filter-bar>span {
    font-size: 90%;
}
#folder-stats {
    margin-left: .5em;
    line-height: 2em;
    float: right;
    .icon {
        margin-right: .3em;
    }
}
#filter {
    flex: 1;
    box-sizing: border-box;
}
#filter-bar {
    display: flex;
    align-items: center;
    gap: .8em;
    margin: 0.2em 0 0;
    padding: 2px 0 1px 3px;
    height: 1.8em; /* necessary to animate displaying */
    input[type=checkbox] { margin-top: .3em; }
    span:empty { display:none } /* avoid flex-gap */
}
#login-options {
    font-size: smaller;
    input[type=checkbox] {
        transform: scale(1.5);
    }
}

ul.dir {
    padding: 0;
    margin: 0;
    clear: both;
    &>p { text-align: center; }
    li {
        display: block;
        list-style-type: none;
        padding: 0.3em 0.3em 0.4em;
        border-bottom: 1px solid var(--faint-contrast);
        &:nth-of-type(odd) { background-color: var(--ghost-contrast); }

        .container-folder { font-size: smaller }

        input[type=checkbox] {
            margin-right: 1em;
        }
        .link-wrapper {
            @media (hover: none) {
                .popup-menu-button { display: none }
            }
            @media (hover: hover) {
                &:not(:hover):not(:focus,:focus-within) .popup-menu-button { opacity: .001; } // use opacity, as jaws is not setting :focus
                &:hover { padding: 1em; margin: -1em; // add margin to avoid leaving the hover unintentionally. Using this on @media(hover:none) will result in some taps to be missed. It happened on a long folder with no spaces in the name to wrap.
                    .popup-menu-button { z-index: 1} // without this, attempting to hover from the name to the menu-button will easily lose the :hover if a comment is present
                }
            }
            a {
                &:last-of-type {
                    word-break: break-word;
                    padding-right: .5em;
                }
                .icon {
                    margin-right: .5em;
                    display: inline-block;
                    text-align: center;
                }
                img.icon, video.icon { // same alignment as font icons
                    vertical-align: bottom;
                    position: relative;
                    top: 1px;
                }
                &:hover {
                    text-decoration: underline;
                }
            }
        }
        .entry-panel {
            float: right;
            padding-top: 0.3em;
            display: flex;
            align-items: center;
            .icon-button {
                margin: -3px 0 -3px 0.4em;
                font-size: 0.7em;
                width: 2.4em;
            }
            .entry-details {
                font-size: 90%;
                margin-left: 4px;
                font-variant-numeric: tabular-nums; /* trick to get stuff aligned */

                .entry-size-unit {
                    margin-left: .3em;
                }
            }
        }

        &>div:last-of-type { clear:both }
        &.page-separator {
            margin-top: .7em;
            position: relative;
            &::before {
                content: attr(label);
                position: absolute;
                top: -1.5em;
                font-size: smaller;
                margin-left: calc(50% - 1em);
                opacity: .9;
            }
        }
    }
}
.entry-comment {
    display: inline;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: .5em; // affecting only the layout of the current-folder-comment
    &::before, &::after {
        font-size: 1.5em;
        font-family: serif;
        line-height: 1px;
        position: relative;
    }
    &::before {
        content: "“";
        margin-right: 0.1em;
        top: 0.2em;
    }
    &::after {
        content: "„";
        top: -0.1em;
        margin-left: 0.1em;
    }
}

#menu-bar {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    &>* {
        flex: 1;
        margin: 0.1em; // using margin instead of gap because of the 0-width element that would produce extra gap
        &:first-child { margin-left: 0 }
        &:last-child { margin-right: 0 }
    }
    button {
        padding: min(1vh, 0.5em) 0; // avoid wasting too much vertical space, and no need for horizontal padding as we are using flex to grow
    }
}
#searched {
    margin: .2em;
}
#user-panel {
    display:flex;
    flex-direction: column;
    gap: 1em;
    a>button {
        width: 100%;
    }
}

ul { padding-left: 2em }

button .icon + .label {
    cursor: inherit;
    margin-left: .4em;
}

.dialog-backdrop.working {
    font-size: 5em;
    animation: 1s fade-in;
}
.dialog-content {
    padding: .2em; /* give space for focus outline */
}
.dialog-alert .dialog-content {
    text-align: center;
    p { text-align: left; display: inline-block; }
    ul { text-align: left; } // bullet points should be aligned
}

.dialog {
    min-width: 11em;
    --color: var(--button-bg);
}
.dialog-icon .icon {
    margin-left: -1px; font-size:95%;
    margin-top: 0.4em; // useful for and affecting only img icons
    border-radius: 0.6em 0;
}

#paging {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: .1em;
    background-color: var(--bg);
    padding: 0 0.2em 0.2em;
    &>button { z-index: 1; }
    button { box-shadow: 0 0 .3em .3em #0003; }
    #paging-middle {
        padding: 0 0.5em;
        margin: 0 -0.3em;
        display: flex;
        gap: .5em;
        flex: 1;
        overflow-x: auto;
    }
    #paging-middle>button {
        flex: 1;
        min-width: unset;
        padding-top: 0; padding-bottom: 0; /* reduce vertically in case a horizontal scrolling bar is needed */
    }
    button {
        background: var(--button-bg);
        text-align: center;
        white-space: nowrap;
        padding: .5em; /* fit more buttons on screen */
    }
}

.upload-toolbar {
    @extend .hide-back;
    position: sticky;
    top: -4px; padding-top: 1px; // workaround: without this, the scrolling list behind is visible above (vertically, not z-index)
    z-index: 3; // necessary to not be covered by icon-buttons
    box-shadow: 0 0 .3em .3em var(--bg);
}
.upload-hashing::before,
.upload-progress::before { content: var(--separator); }
.entry-size::after { content: var(--separator) }

.upload-progress {
    min-width: 4em;
    display: inline-block;
    margin-left: 0.5em;
}
.upload-progress-bar {
    display: block;
    width: 100%;
}
.upload-list {
    margin-top: .5em;
    td:nth-child(1) { width: 0; }
    td:nth-child(2) { text-align: right; width: 0; white-space: nowrap; padding-left: 0.5em; }
    td:nth-child(3) { padding: .2em .5em; word-break: break-word; }
}
.nowrap { white-space: nowrap }

.login-dialog {
    form {
        display: flex;
        flex-direction: column;
        gap: 1.2em;
    }
    label {
        display: block;
        margin-bottom: .5em;
        margin-left: .1em;
    }
    .submit { text-align: right; }
}
#search-dialog form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    .submit { text-align: right; }
}

form label+input { margin-top: .2em; }

.miss-perm  { margin: 0 0.3em }

.popup-menu-button {
    font-size: .8em; padding: .2em .3em; position: absolute; opacity: .8; white-space: nowrap;
    &:hover,&:focus { opacity: 1 }
    .icon { margin-right: 0.1em; }
}

.file-dialog .dialog { min-width: 13em; } /* more room for title */
.file-dialog-properties {
    word-break: break-word;
    line-height: 1.5em;
    margin: 0;
    dt { font-weight: bold; }
    dd { margin-left: 1.5em; }
}
.file-menu {
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--faint-contrast);

    display: flex;
    flex-direction: column;
    gap: .7em 1em;
    a {
        display: flex;
        align-items: flex-start;
        label {
            cursor: pointer;
            margin-top: .1em;
            small { display: block }
        }
        .icon { margin-right: 0.5em; }
        &:hover { @extend .highlightedText }
    }
}

.unauthorized { text-align: center }

.toast-content {
    a { color: var(--bg); text-decoration: underline; }
    .horiz-sep { display: none }
}

#clipBar {
    position: sticky; bottom: 0;
    background: var(--bg);
    box-shadow: 0 0 .3em .3em var(--bg);

    display: flex; align-items: center; gap: 0.5em;
    margin: 0 1px;
}
#clipboard-content {
    text-align: left;
    li:first-of-type { margin-top: .5em }
}

#focus-typing {
    position: fixed;
    top: 0;
    right: 0;
    background: var(--bg);
    z-index: 3;
    padding: .1em .5em;
    border: 1px solid currentColor;
    margin: -1px;
}
.focus-typing-mismatch {
    color: var(--error);
}

.tiles-mode {
    max-width: none;
    @media (min-width: 42em) {
        margin: 0 1em;
    }
    --tile-size: 5;
    --name-lines: 3;
    --name-height: calc(4.7em + var(--tile-size) * .4em + 1.2em * var(--name-lines));
    --tile-width: calc(5em + 1em * var(--tile-size));

    ul.dir {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(var(--tile-width),1fr));
        grid-auto-rows: calc(var(--name-height) + 1.3em);
        gap: 0 20px;

        li {
            text-align: center;
            position: relative;
            display: flex;
            flex-direction: column;
            border-bottom: none;
            overflow-x: clip;
            padding: .5em 0 0;

            .link-wrapper {
                &:not(:hover) {
                    max-height: var(--name-height);
                    display: block;
                    display: -webkit-box;
                    overflow: hidden;
                    -webkit-line-clamp: calc(var(--name-lines) + 1); // + icon's line
                    -webkit-box-orient: vertical;
                }
                a {
                    &:last-of-type { padding: 0; }
                    span { display: block; }
                    .icon.icon { font-size: calc(1.2rem + .6rem * var(--tile-size)); }
                    img.icon, video.icon {
                        width: auto;
                        height: 1em;
                        padding: 0.1em 0;
                    }
                    .icon {
                        font-size: 4rem;
                        display: block;
                        margin: auto; // good for both font and img icons
                    }
                }

                &:hover {
                    overflow: visible;
                    display: block;
                    z-index: 1;
                    .icon::before { text-decoration: none; }
                }
            }
            .link-wrapper:hover {
                padding: 0; margin: 0;
            }
            &:nth-of-type(odd) {
                background-color: inherit; // to avoid checkerboard effect
            }
            .entry-panel {
                justify-content: center;
                font-size: 10pt;
            }
            .entry-details {
                font-size: 80%;
            }
            &.page-separator {
                margin-top: 0;
                &::before { content: ''; }
            }
            input[type=checkbox] {
                margin: 0;
                position: absolute;
                top: 0.3em;
                right: 1em;
            }

            .link-wrapper a { display:inline } // avoid overlapping name and details
            &:hover {
                --bg: var(--ghost-contrast-alt);
                background: var(--bg); // highlight whole tile
                .link-wrapper, .entry-panel {
                    z-index: 1; background: var(--bg); // cover underlying elements of other tiles, in case it's overflowing
                }
                input[type=checkbox] { z-index: 2; } // over link-wrapper, but not over header
                .entry-panel {
                    padding-bottom: 0.3em;
                }
            }
            .entry-comment {
                max-height: 1.2em;
                overflow: hidden;
                margin: 0;
                &:hover {
                    max-height: none;
                    overflow: auto;
                }
            }
        }
    }
    .entry-size::after {
        content: none;
    }
    .entry-ts { display: none; }
    .popup-menu-button {
        position: absolute;
        top: 0;
        left: 0;
    }
    #filter-bar {
        margin-bottom: 1em;
    }
    #paging { z-index: 1 } // avoid being covered by hovered elements

}

#root // heavier selector
.file-show {
    backdrop-filter: none; background: #888e; // less GPU, as file-show can stay on for long

    &>div {
        height: 100%;
        width: 100%;
        @media (max-width: 30em) { // portrait mobile
            flex-direction: column-reverse !important; // bar at the bottom, easier on the thumb
        }
    }

    .showing-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .meta-tags {
        position: relative;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000;
        &>div { position: absolute;
            margin: 1em;
        }
    }
    .showing {
        max-width: calc(100% - min(4vw, var(--nav-size)) * 2); // avoid overlapping of controls and nav buttons
        max-height: 100%;
    }
    .cover {
        position: absolute;
        width: 100%; height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        z-index: -1; // otherwise firefox (forgot to finished this comment)
        opacity: .4;
        transition: opacity 1s;
        &.none { opacity: 0; }
    }
    audio.showing { min-width: 60%; transition: opacity 1s; }
    .cover:not(.none)+audio { opacity: .7; }
    audio.showing, // even on mobile, we need the whole thing to control it decently, and nav-s don't seem to be a problem
    img.showing { max-width: 100% } // we are ok with overlapping for simple images
    .main {
        flex: 1; position: relative; max-height: 100%;
        overflow: hidden; // without this <video> can make me go beyond the screen limit
    }
    .freeY, .fullWidth {
        .main { overflow-y: auto; }
        .showing { max-height: initial; margin: auto; }
        .showing-container { overflow: auto; align-items: flex-start; justify-content: flex-start; }
    }
    .fullWidth {
        .showing-container, .showing { width: 100%; }
    }
    --nav-size: 25vh; // big
    @supports (width: min(1px,2px)) {
        --nav-size: min(25vh, 25vw, 13em);
    }
    .nav {
        position: absolute;
        width: .5em; // closer to the edge
        font-size: var(--nav-size);
        cursor: pointer;
        opacity: .3;
        -webkit-text-stroke: 2px black;
        user-select: none;
        transition: opacity .3s;
        &:hover { opacity: .7; }
        &.nav-hidden:not(:hover) { opacity: .3 }
    }
    .bar {
        padding: .5em min(2vw, 1em);
        background: var(--bg);
        opacity: .8;
        flex-wrap: wrap;
        &,&>.controls {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .5em;
        }

        .entry-details { font-size: smaller; margin-left: 1em; }
        .entry-ts { display: inherit; font-size: smaller; }
        .entry-size::after { display: none }
    }
}
.file-show-help {
    kbd { margin: .5em }
    kbd:first-of-type { margin-top: 1em; }
}

@media (min-width: 42em) {
    body {
        /* Works on Firefox */
        scrollbar-width: thin;
        scrollbar-color: var(--button-bg) var(--ghost-contrast);

        /* Works on Chrome, Edge, and Safari */
        &::-webkit-scrollbar {
            width: 12px;
        }
        &::-webkit-scrollbar-track {
            background: var(--ghost-contrast);
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--button-bg);
            border-radius: 20px;
            border: 1px solid var(--ghost-contrast)
        }
    }
    button { padding: .4em .8em; }
}
@media (max-width: 42em) {
    :root { --ghost-contrast: #8883; } /* phones have different curve */
    body, button, select { font-size: 14pt; }
    #menu-bar, #filter-bar, #clipBar {
        button .icon + .label { display: none } /* icons only */
    }
    #filter-bar {
        margin-top: 0.4em;
        button { // make it same size of top bar
            width: 17.6vw;
            height: 2.3em;
        }
    }
    .breadcrumb {
        word-break: break-all; // solves with very long names without spaces. 'break-word' is nicer but doesn't handle worst cases like /gear/mininova/x/LOOPMASTERS%204Gig%20Pack/LOOPMASTERS_2015/BASS_HOUSE_AND_GARAGE_2_DEMOS/SOUNDS_AND_FX/
        .icon {
            font-size:24px;
        }
    }
    #root>.tiles-mode {
        margin: 0;
    }
}

@media (max-height: 600px) and (orientation: landscape) {
    .file-dialog {
        .dialog-content {
            display: flex;
            gap: 3em;
            margin: 1em;
            .file-menu { // move divisor to left
                margin-top: 0;
                padding-top: 0;
                border-top: none;
                margin-left: 2em;
                padding-left: 2em;
                border-left: 1px solid var(--faint-contrast);
            }
        }
    }
}

@media (pointer: coarse) {
    .file-show .nav { height: 1.6em; } // correct centering on android
    #root>.tiles-mode .file-menu-button { font-size: 1em; margin-top: 0.3em; } // easier to tap
}
